<template>
  <div id="lap-app">
    <el-container style="height: 100vh">
      <div
        :class="
          sideMenuCollapse
            ? 'sideMenuCollapseButton'
            : 'sideMenuCollapseButton sideMenuCollapseButtonOpened'
        "
      >
        <el-link
          :icon="sideMenuCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="() => (sideMenuCollapse = !sideMenuCollapse)"
          :title="sideMenuCollapse ? '展开' : '收起'"
        ></el-link>
        <span class="my-menu-title">我的导航</span>
      </div>
      <el-aside
        :class="sideMenuCollapse ? 'menu-collapse' : 'menu-not-collapse'"
        style="padding-top: 40px"
      >
        <el-menu
          ref="businessMenu"
          style="border-right: none"
          background-color="#001529"
          text-color="#a6adb4"
          active-text-color="#ffd04b"
          :collapse="sideMenuCollapse"
          :collapse-transition="false"
          :unique-opened="false"
          :default-openeds="defaultOpeneds"
          @select="selectFunctionMenu"
        >
          <!--功能菜单-->
          <el-submenu
            v-for="p in functionData.filter((m) => m.parentFunctionCode == '')"
            :index="p.functionId"
            :key="p.functionId"
            :show-timeout="0"
            :hide-timeout="0"
          >
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span>{{ p.functionName }}</span>
            </template>
            <template
              v-for="fc2 in functionData.filter(
                (m) => m.parentFunctionCode === p.functionCode
              )"
            >
              <el-menu-item
                v-if="fc2.parentFunctionCode"
                :key="fc2.functionId"
                :url="fc2.url"
                :data="fc2"
                :index="fc2.functionId"
                >{{ fc2.functionName }}</el-menu-item
              >
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main style="padding: 0px; margin: 0px">
        <el-container style="height: 100%">
          <el-header class="home-header">
            <table style="height: 100; width: 100%">
              <tr>
                <td style="height: 40px">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item class="hide-separator"
                      >当前位置：</el-breadcrumb-item
                    >
                    <el-breadcrumb-item
                      v-for="p in paths"
                      :key="p.functionId"
                      >{{ p.title }}</el-breadcrumb-item
                    >
                  </el-breadcrumb>
                </td>
              </tr>
            </table>
          </el-header>
          <el-main class="main-body" style="min-width: 800px; height: 100%">
            <transition name="el-fade-in">
              <router-view></router-view>
            </transition>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  mixins: [$lap.BaseView],
  name: "lap-app",
  data() {
    return {
      pTitle: "首页",
      userName: null,
      applicationData: [
        {
          applicationId: "1",
          applicationCode: "10",
          applicationName: "研发助手",
        },
      ],
      functionData: [
        {
          functionId: "1",
          functionCode: "10100",
          parentFunctionCode: "",
          functionName: "日志模块",
        },
        {
          functionId: "2",
          functionCode: "10100102",
          parentFunctionCode: "10100",
          functionName: "日志类型",
          url: "/Logger/LogType",
        },
        {
          functionId: "3",
          functionCode: "10100103",
          parentFunctionCode: "10100",
          functionName: "最近日志",
          url: "/Logger/RecentLog",
        },
        {
          functionId: "4",
          functionCode: "10100104",
          parentFunctionCode: "10100",
          functionName: "简单日志下载",
          url: "/Logger/DetailLogDownload/1",
        },
        {
          functionId: "5",
          functionCode: "10100105",
          parentFunctionCode: "10100",
          functionName: "详细日志下载",
          url: "/Logger/DetailLogDownload/0",
        },
        {
          functionId: "6",
          functionCode: "10100106",
          parentFunctionCode: "10100",
          functionName: "触发器管理",
          url: "/Trigger/Trigger",
        },
        {
          functionId: "7",
          functionCode: "10100107",
          parentFunctionCode: "10100",
          functionName: "触发器日志",
          url: "/Trigger/TriggerLog",
        },
        {
          functionId: "101",
          functionCode: "10101",
          parentFunctionCode: "",
          functionName: "接口模拟",
        },
        {
          functionId: "102",
          functionCode: "10101101",
          parentFunctionCode: "10101",
          functionName: "接口模拟器配置",
          url: "/Mock/MockScript",
        },
        {
          functionId: "103",
          functionCode: "10101103",
          parentFunctionCode: "10101",
          functionName: "接口模拟数据",
          url: "/Mock/MockData",
        },
      ],
      selectedApplication: null,
      paths: [], //面包屑位置
      //展开隐藏菜单
      sideMenuCollapse: false, //当行折叠状态
      menuPanelVisible: false, //菜单面板显示
      menuSearchValue: "", //菜单面板搜索关键字
      defaultOpeneds: ["1", "101"], //默认展开菜单
    };
  },
  mounted() {
    var that = this;

    //初始化路由位置
    if (that.$route.path === "/Index") {
      that.$router.push({
        path: "/Logger/LogType",
      });
    } else {
      that.$router.push({
        path: that.$route.path,
      });
      that.fillPaths(that.$route.path);
    }
  },
  methods: {
    /**
     * 填充面包屑位置
     */
    fillPaths(currentPath) {
      //具体功能
      let func = this.functionData.find((item) => {
        return item.url == currentPath;
      });
      if (func) {
        //匹配到路由，则刷新显示路径导航
        this.paths.splice(0, this.paths.length);

        //所属应用
        let appData = this.applicationData.find((item) => {
          return item.applicationCode == func.applicationCode;
        });
        if (appData) {
          this.paths.push({ title: appData.applicationName });
        }

        //功能所属模块
        let parentFunc = this.functionData.find((item) => {
          return item.functionCode == func.parentFunctionCode;
        });
        if (parentFunc) {
          this.paths.push({ title: parentFunc.functionName });
        }

        //功能点
        this.paths.push({ title: func.functionName });
      }
    },
    /**
     * 业务系统选择菜单
     */
    selectFunctionMenu(r) {
      const that = this;
      //找功能点
      let item = that.functionData.find((value) => {
        return value.functionId == r;
      });
      //打开功能
      if (item.url) {
        this.$router.push({
          path: item.url,
        });
      }
    },
  },
  watch: {
    /**
     * 切换应用，默认展开应用一级分组
     */
    selectedApplication(val) {
      const that = this;
      that.defaultActiveFunctionId = that.functionData.find(
        (fc) =>
          fc.applicationCode == that.selectedApplication.applicationCode &&
          !fc.parentFunctionCode &&
          fc.status === 1
      ).functionId;
      if (that.sideMenuCollapse === false) {
        that.$nextTick(() => {
          that.$refs["elFunctionMenu"].open(that.defaultActiveFunctionId);
        });
      }
    },
    /**
     * 监控路由变化
     */
    $route(val) {
      // console.log(val);
      let currentPath = this.$route.path;
      this.fillPaths(currentPath);
    },
  },
};
</script>
<style lang="scss">
body {
  margin: 0px;
}
.logo-box {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 600;
  padding-left: 52px;
  // background-image: url('../_assets/logo.png');
  padding-left: 0px;
  .menuPanelButton {
    width: 45px;
  }
  img {
    height: 28px;
    padding: 6px 0px 0px 5px;
  }
}
.home-header .menuPanelButton {
  font-size: 28px;
  // background-color: #e4e7ed;
  color: #606266;
  height: 40px;
  margin-top: 0px;
  padding-top: 0px;
  width: 45px;
  margin-top: -1px;
}
.home-header .menuPanelButton:hover {
  color: #303133;
}
.sideMenuCollapseButton {
  background-color: transparent;
  width: 45px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  z-index: 1;
  background-color: #001529;
  color: #d7dae0 !important;
  border-bottom: 1px solid #434a50;
  justify-content: left;
  padding-left: 8px;
  box-sizing: border-box;
  a {
    i {
      font-size: 28px;
      color: #d7dae0 !important;
    }
  }
  .my-menu-title {
    display: none;
  }
}

.sideMenuCollapseButtonOpened {
  width: 200px;
  .my-menu-title {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    vertical-align: top;
    font-size: 14px;
    padding-left: 4px;
  }
}
.menuPanel {
  width: 700px !important;
  overflow: auto;
  .el-drawer__body {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
  }
  a {
    color: #409eff;
    font-size: 12px;
    text-decoration: none;
    font-weight: normal;
  }
  a:hover {
    color: #409eff;
    text-decoration: underline;
  }
}
.home-header {
  width: 100%;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0px !important;
  border-bottom: 1px solid #eee;
}

.home-header table {
  width: 100%;
  border-spacing: 0;
  border: none;
}
.home-header table td {
  padding: 0px 10px;
}
.home-header table td.right {
  text-align: right;
  padding-right: 20px;
}
.el-menu--collapse {
  width: 100%;
}
.el-menu-item.is-active,
.el-menu-item.is-active:hover {
  background-color: #409eff !important;
  color: #ffffff !important;
}
.el-menu-item:hover {
  color: #fff !important;
  background-color: #434a50 !important;
}

.el-submenu .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu .el-icon-menu {
  margin-right: 3px !important;
}
.el-menu-item,
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu__title {
  padding-left: 10px !important;
  font-weight: bold;
}
.el-menu .is-opened span {
  color: #ffffff !important;
}
.el-menu .is-opened i {
  color: #ffffff !important;
}
.menu-not-collapse {
  width: 220px !important;
  height: 100%;
  overflow-y: auto;
  background-color: #001529;
}
.menu-collapse {
  width: 45px !important;
  height: 100%;
  overflow-y: auto;
  background-color: #001529;
}
.logo-not-collapse {
  width: 220px;
  padding: 0px !important;
}
/*弹出菜单靠左边 */
.el-menu--popup-right-start {
  margin-left: 0px;
}
.main-body {
  height: 100%;
  min-width: 900px;
  overflow: auto;
  padding: 5px;
  background-color: #f0f2f5;
  -moz-box-shadow: inset 5px 1px 5px 0px #cccccc;
  -webkit-box-shadow: inset 5px 1px 5px 0px #cccccc;
  box-shadow: inset 5px 1px 5px 0px #cccccc;
}
/*第一个面包屑为：当前位置，所以隐藏第一个分隔符*/
.hide-separator .el-breadcrumb__separator {
  display: none;
}
</style>